<html>
<head>
  <style>
canvas { display:block; }
figcaption, button { display:block; margin:10; paddikng:10}
#customMatrix input { text-align: center; }
  </style>
</head>
<body>
 <center>
  <figure>
    <img id="orig" src="demo_small.png" width="600" height="337">
    <figcaption>The original test image</figcaption>
  </figure>

  <figure>
    <canvas id="grayscale" width="600" height="337"></canvas>
    <button onclick="grayscale()">Grayscale the image</button>
  </figure>
 </center>	
  <script type="text/javascript">
    Filters = {};
    Filters.getPixels = function(img) {
      var c,ctx;
      if (img.getContext) {
        c = img;
        try { ctx = c.getContext('2d'); } catch(e) {}
      }
      if (!ctx) {
        c = this.getCanvas(img.width, img.height);
        ctx = c.getContext('2d');
        ctx.drawImage(img, 0, 0);
      }
      return ctx.getImageData(0,0,c.width,c.height);
    };

    Filters.getCanvas = function(w,h) {
      var c = document.createElement('canvas');
      c.width = w;
      c.height = h;
      return c;
    };

    Filters.filterImage = function(filter, image, var_args) {
      var args = [this.getPixels(image)];
      for (var i=2; i<arguments.length; i++) {
        args.push(arguments[i]);
      }
      return filter.apply(null, args);
    };

    Filters.grayscale = function(pixels, args) {
      var d = pixels.data;
      for (var i=0; i<d.length; i+=4) {
        var r = d[i];
        var g = d[i+1];
        var b = d[i+2];
        // CIE luminance for the RGB
        var v = 0.2126*r + 0.7152*g + 0.0722*b;
        d[i] = d[i+1] = d[i+2] = v
      }
      return pixels;
    };
  </script>
  <script>
    var img = document.getElementById('orig');
    img.addEventListener('load', function() {
    
      var canvases = document.getElementsByTagName('canvas');
      for (var i=0; i<canvases.length; i++) {
        var c = canvases[i];
        c.parentNode.insertBefore(img.cloneNode(true), c);
        c.style.display = 'none';
      }

      function runFilter(id, filter, arg1, arg2, arg3) {
        var c = document.getElementById(id);
        var s = c.previousSibling.style;
        var b = c.parentNode.getElementsByTagName('button')[0];
        if (b.originalText == null) {
          b.originalText = b.textContent;
        }
        if (s.display == 'none') {
          s.display = 'inline';
          c.style.display = 'none';
          b.textContent = b.originalText;
        } else {
          var idata = Filters.filterImage(filter, img, arg1, arg2, arg3);
          c.width = idata.width;
          c.height = idata.height;
          var ctx = c.getContext('2d');
          ctx.putImageData(idata, 0, 0);
          s.display = 'none';
          c.style.display = 'inline';
          b.textContent = 'Restore original image';
        }
      }

      grayscale = function() {
        runFilter('grayscale', Filters.grayscale);
      }
    }, false);
  </script>
</body>
</html>